import React, { PropTypes } from 'react';
import ReactEChart from './ReactEChart';

const getConfig = ({ title, serieName = '', data, min = 0, max = 100 }) => {
	//const serieData = data.sort((a, b) => (a.value - b.value));
	const serieData = data;

	return {
		title: {
			text: title,
			left: 'center',
			top: 0,
			textStyle: {
				color: '#888',
			},
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)',
		},
		selectedMode: 'single',
		visualMap: {
			show: false,
			min,
			max,
			inRange: {
				colorLightness: [0.8, 0],
			},
		},
		series: [
			{
				name: serieName,
				type: 'pie',
				radius: '60%',
				center: ['50%', '50%'],
				data: serieData,
				label: {
					normal: {
						textStyle: {
							color: 'rgba(3, 3, 3, 0.8)',
						},
					},
				},
				labelLine: {
					normal: {
						lineStyle: {
							color: 'rgba(3, 3, 3, 0.3)',
						},
						smooth: 0.1,
					},
				},
				itemStyle: {
					normal: {
						color: '#3db0fb',
						shadowBlur: 20,
						shadowColor: 'rgba(0, 0, 0, 0.3)',
					},
				},
			},
		],
	};
};

const PieChart = (props) => {
	const config = getConfig(props);
	return (
		<div style={{ height: 300 }}>
			<ReactEChart config={config} />
		</div>
	);
};

PieChart.propTypes = {
	title: PropTypes.string.isRequired,
	serieName: PropTypes.string,
	data: PropTypes.array.isRequired,
};

export default PieChart;
